class Enlarge
{
    constructor(el,options = {maskBg:'yellow'})
    {
    // 1保存全局信息
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.options = options   // 这个配置属于每个实例化
        
        // 2. 默认调用
        this.init()
}
init(){
    this.smallImgChange()
    this.config()
    this.overOut()
    this.enlargeSetWH()
    this.maskMove()
      // this.enlargeSetBg()
       
}
config() {
    this.maskObj.style.background = this.options.maskBg
}
maskMove()
{
    // 1 获取【放大镜里面】【左侧图片】
   // 2 绑定【移动事件】
    // this.imgObj.onmousemove = function(evt) { // this 事件源 img
    this.imgObj.onmousemove = (evt) => { // this 实例化对象
let e = evt || window.event      
        // 3 事件处理函数中  - 先获取鼠标位置
let left = e.pageX - this.el.offsetLeft-this.maskObj.offsetWidth/2
let top = e.pageY - this.el.offsetTop-this.maskObj.offsetWidth/2

if (left<0) left = 0
if (top<0) top = 0
let maxLeft = this.imgObj.clientWidth - this.maskObj.offsetWidth
let maxTop = this.imgObj.clientHeight- this.maskObj.offsetHeight
if(left>maxLeft) left = maxLeft
if(top>maxTop) top = maxTop
        // 4 事件处理函数中  - 同步遮罩框left、top
this.maskObj.style.left = left + 'px'
this.maskObj.style.top = top + 'px'
        // 4 事件处理函数中  - 同步放大镜坐标
        this.enlargeSetBg(left, top) 
    }
}
enlargeSetBg(left, top) 
{
      // 右侧背景移动x  = mask left * （右侧大图/左侧图）
      let enlargeBgSize = (this.getStyle(this.enlargeObj,'background-size')).split(' ')
    //   800 800
    let enlargeBgW = parseInt(enlargeBgSize[0])
    let enlargeBgH = parseInt(enlargeBgSize[1])
    let imgW = parseInt(this.getStyle(this.imgObj, 'width'))
    let imgH =  parseInt(this.getStyle(this.imgObj, 'height'))
    let x = left * (enlargeBgW/imgW)
    let y = top * (enlargeBgH/imgH)

    this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`


}
//封装一个获取非行内样式的方法
getStyle(tagObj, cssAttr)
{
    return window.getComputedStyle ? window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr]// 当对象的键是变量时用数组语法
}
enlargeSetWH()
{
      // let maskW = this.maskObj.offsetWidth // 脚下留心：不能用
        // 知识点1：获取图片的offsetLeft必须等图片加载完毕  imgObj.onload 
        // 知识点2：offset系列/client系列 必须是可见元素  也就是display 不能是 none 
        // 解决：获取非行内样式 
         // div.enlarge background          div.enlarge w
        // ---------------------    =      -----------
        // div.img background               div.mask w

        // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
let maskW = parseInt(this.getStyle(this.maskObj,'width'))
let maskH = parseInt(this.getStyle(this.maskObj,'height'))
//  console.log(maskW, maskH);
let enlargeBgSize = (this.getStyle(this.enlargeObj, 'background-size')).split(' ')
console.log(enlargeBgSize)
let enlargeBgW = parseInt( enlargeBgSize[0])
let enlargeBgH = parseInt( enlargeBgSize[1])
let imgW = parseInt(this.getStyle(this.imgObj,'width'))
let imgH = parseInt(this.getStyle(this.imgObj,'height'))
let w = maskW * (enlargeBgW/imgW)
let h = maskH * (enlargeBgH/imgH)
this.enlargeObj.style.width = w + 'px'
this.enlargeObj.style.height = h + 'px'
console.log(enlargeBgW,enlargeBgH,imgW,imgH,w,h)
}
overOut()
{
     // 1 获取【放大镜盒模型】里面的【左侧图片】
        // 2 绑定【鼠标移入事件】
        // 3 事件处理函数中：显示【遮罩框、放大镜】
        // this.imgObj.onmouseover = function() {  // this 事件源 imgObj
this.imgObj.onmouseover = ()=>{this.maskObj.style.display=this.enlargeObj.style.display='block'}
this.imgObj.onmouseout = ()=>{this.maskObj.style.display=this.enlargeObj.style.display='none'}
}
//最后，切换手机图片
// 步骤1：获取所有smallImgObjs
// 步骤2：遍历增加点击事件
// 步骤3：在事件处理函数中（1-改bigImg，2-放大镜图）
smallImgChange()
{
    let liObjs = this.el.querySelectorAll('ul li')
console.log(liObjs)
liObjs.forEach((item,i)=>{
item.onclick = ()=>{
    this.imgObj.style.backgroundImage = `url(./imgs/${i+1}.jpg)` 
    this.enlargeObj.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
}
})
}
}
export default Enlarge